<template>
  <div class="User">
    <div class="wrapper">
      <div class="container">
        <el-row type="flex" justify="space-between">
          <el-col :xs="17" :sm="17" :md="17" :lg="17" :xl="17">
            <div class="main-top flex-c">
              <a href="" class="user-img">
                <img src="../../public/author/author1.webp" alt="">
              </a>
              <div class="user-info">
                <div class="user-message">
                  <a href="" class="user-name">
                    {{username}}
                  </a>
                  <div class="user-other ">
                    <ul class="flex-c">
                      <li>
                        <div class="message-item">
                          <a href="">
                            <p>10</p>
                            关注 >
                          </a>
                        </div>
                      </li>
                      <li>
                        <div class="message-item">
                          <a href="">
                            <p>10</p>
                            关注 >
                          </a>
                        </div>
                      </li>
                      <li>
                        <div class="message-item">
                          <a href="">
                            <p>10</p>
                            关注 >
                          </a>
                        </div>
                      </li>
                      <li>
                        <div class="message-item">
                          <a href="">
                            <p>10</p>
                            关注 >
                          </a>
                        </div>
                      </li>
                      <li>
                        <div class="message-item">
                          <a href="">
                            <p>10</p>
                            关注 >
                          </a>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab">
              <ul class="flex-c tab-title">
                <li v-for="(item,index) in TabName" :key="index" @click="activeName=item.content" :class="{active: activeName===item.content}">
                  <a href="#">
                    <i class="iconfont">{{item.icon}}</i>
                      {{item.content}}
                  </a>
                </li>
              </ul>
              <div class="table-content">
                内容区域
              </div>
            </div>
          </el-col>
          <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
            <ul>
              <li class="user-dynamic" v-for="(item2,index) in userDynamic" :key="index">
                <a href="">
                  <i class="iconfont">{{item2.icon}}</i>
                  {{item2.title}}
                </a>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'User',
  data () {
    return {
      activeName: '文章',
      TabName: [
        {
          icon: '\ue630', // &#xe801; 更换一下
          content: '文章'
        }, {
          icon: '\ue630',
          content: '动态'
        }, {
          icon: '\ue630',
          content: '最新评论'
        }, {
          icon: '\ue630',
          content: '热门'
        }
      ],
      userDynamic: [{
        icon: '\ue603',
        title: '他关注的专题/文集/连载'
      }, {
        icon: '\ue603',
        title: '他喜欢的文章'
      }]
    }
  },
  computed: { // 计算属性
    ...mapState(['username'])
  },
  methods: { // 方法
  }
}
</script>

<style lang="scss">
  .User {
    .wrapper {
      .container {
        padding-top: 30px;
        .main-top {
          margin-bottom: 20px;

          .user-img {
            width: 80px;
            height: 80px;
          }

          .user-info {
            margin-left: 10px;

            .user-name {
              font-size: 21px;
              font-weight: 700;
            }

            .user-other {
              margin-top: 10px;

              .message-item {
                margin: 0 7px 6px 0;
                padding: 0 7px 0 0;
                border-right: 1px solid #f0f0f0;

                &:last-child {
                }

                a {
                  color: #969696;

                  p {
                    color: #333333;
                    margin-bottom: 5px;
                  }
                }
              }

              li {
                &:last-child {
                  .message-item {
                    border-right: 0;
                  }
                }
              }
            }
          }
        }
        .tab{
          .tab-title {
            margin-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
            li{
              padding: 8px 0;
              text-align: center;
              a{
                color: #969696;
                display: block;
                padding: 13px 20px;
                font-size: 15px;
                font-weight: 700;
                i{
                  margin-right: 5px;
                  font-size: 17px;
                }
              }
              &:hover{
                border-bottom: 2px solid #646464;
                a{
                  color: #333333;
                }
              }
            }
            .active{
              border-bottom: 2px solid #646464;
              a{
                color: #333333;
              }
            }
          }
        }
        .user-dynamic{
          margin-top: 10px;
          vertical-align: middle;
          i{
            margin-right: 10px;
            font-size: 20px;
            vertical-align: middle;
          }
        }
      }
    }
  }
</style>
